<template>
  <a-card class="body-container">
    <a-row style="height: 100%">
      <a-col :span="4" style="height: 100%">
        <a-card
          title="应用列表"
          :body-style="{ height: 'calc( 100% - 50px )', padding: '5px' }"
          style="margin-right: 10px; height: 100%"
          size="small"
        >
          <s-scroll style="height: 100%">
            <a-tree
              :selected-keys="appSelectKeys"
              :checkable="false"
              class="server"
              :tree-data="apps"
              :field-names="{
                children: 'children',
                title: 'name',
                key: 'code'
              }"
              block-node
              @select="
                (selectedKeys) => {
                  appSelectKeys = selectedKeys
                }
              "
            >
              <template #title="{ dataRef }"> {{ dataRef.name }} </template>
            </a-tree>
          </s-scroll>
        </a-card>
      </a-col>
      <a-col v-if="appSelectKeys != null" :span="20" style="height: 100%">
        <s-list-form>
          <template #less>
            <s-form-item size="list-middle" label="模板名称">
              <s-input v-model="query.templateName" placeholder="模板名称" />
            </s-form-item>
          </template>
          <template #more />
        </s-list-form>
        <s-tool-bar>
          <template #left>
            <s-button
              v-if="authorize.insert"
              type="primary"
              icon="plus-outlined"
              @click="
                $refs.add.init((dialog) => {
                  dialog.resetFormValue(), dialog.open()
                })
              "
              >新增</s-button
            >
            <a-popconfirm
              v-if="authorize.deleteMulti"
              title="确认删除所选数据？"
              ok-text="是"
              cancel-text="否"
              @confirm="deleteMulti"
            >
              <s-button type="danger" icon="delete-outlined">删除</s-button>
            </a-popconfirm>
          </template>
          <template #right>
            <s-button type="primary" icon="search-outlined" @click="$refs.table.search(query)"
              >查询</s-button
            >
            <s-button
              style="margin-left: 8px"
              icon="stop"
              @click="
                () => {
                  query = {}
                  $refs.table.search(query)
                }
              "
              >重置</s-button
            >
          </template>
        </s-tool-bar>
        <s-table
          ref="table"
          bordered
          :columns="columns"
          :url="'/menu/template/pageList?app=' + appSelectKeys[0]"
          :scroll="{ y: tableHeight }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a
                v-if="authorize.selectOneById"
                style="margin-right: 8px"
                @click=";(selectRowId = record.id), $refs.detail.init()"
              >
                <s-icon type="eye-outlined" />查看
              </a>
              <a
                v-if="authorize.update"
                style="margin-right: 8px"
                @click=";(selectRowId = record.id), $refs.update.init()"
              >
                <s-icon type="edit-outlined" />编辑
              </a>
              <a
                v-if="authorize.update"
                style="margin-right: 8px"
                @click="openSettingMenu(record.id)"
              >
                <s-icon type="setting-outlined" />设置菜单
              </a>
              <a v-if="authorize.update" style="margin-right: 8px" @click="makeDefault(record.id)">
                <s-icon type="setting-outlined" />设为默认
              </a>
              <a-popconfirm
                v-if="authorize.delete"
                title="确认删除此条数据？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteById(record.id)"
              >
                <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
              </a-popconfirm>
            </template>
            <template v-else-if="column.key == 'defaultTemplate'">
              <div v-if="record.defaultTemplate == '1'">是</div>
              <div v-else>否</div>
            </template></template
          >
        </s-table>
        <!--    <detail ref="detail" />
        <add
          ref="add"
          @success="
            () => {
              $refs.table.refresh()
            }
          "
        />
        <update
          ref="update"
          @success="
            () => {
              $refs.table.refresh()
            }
          "
        />-->
        <s-dynamic-form-dialog
          ref="add"
          title="添加"
          form-id="5014f2dd5aee4b50bce04bc79a459749"
          @save="addItem"
        ></s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="detail"
          disabled
          :pull-form-data="
            () => {
              return $api.GET('/menu/template/selectOneById', { id: selectRowId })
            }
          "
          form-id="5014f2dd5aee4b50bce04bc79a459749"
        >
        </s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="update"
          title="编辑"
          :pull-form-data="
            () => {
              return $api.GET('/menu/template/selectOneById', { id: selectRowId })
            }
          "
          form-id="5014f2dd5aee4b50bce04bc79a459749"
          @save="updateItem"
        >
        </s-dynamic-form-dialog>
        <s-tree-modal
          ref="menus"
          :url="'/menu/item/list?app=' + appSelectKeys[0]"
          value-field="id"
          label-field="title"
          :select-url="selectUrl"
          :save="saveMenuSetting"
          check-children
        />
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '模板名称',
    dataIndex: 'templateName'
  },
  {
    title: '默认模板',
    key: 'defaultTemplate'
  },
  {
    title: '备注',
    dataIndex: 'templateRemark'
  },
  {
    title: '操作',
    width: 380,
    fixed: 'right',
    key: 'action'
  }
]
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
export default {
  name: 'QueryList',
  // components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      templateId: undefined,
      selectUrl: undefined,
      columns: columns,
      selectRowId: null,
      apps: [],
      appSelectKeys: null
    }
  },
  created() {
    this.$api.GET('/realm/app/allList').then((res) => {
      if (res.data) {
        res.data.forEach((item) => {
          this.apps.push(item)
        })
        this.appSelectKeys = [res.data[0].code]
        this.$nextTick(() => {
          this.$calcTableHeight()
        })
      }
    })
  },
  authorize: '/menu/template/permissionList',
  methods: {
    addItem(values, fullValue, dialog) {
      this.$api
        .PUT('/menu/template/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      this.$api
        .PUT('/menu/template/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api
          .DELETE('/menu/template/deleteMulti', { ids: keys.toString() })
          .then(() => {
            this.$loading(false)
            this.$refs.table.search(this.query)
          })
          .catch(() => {
            this.$loading(false)
          })
      }
    },
    makeDefault(id) {
      this.$loading(true)
      this.$api
        .PUT(
          '/menu/template/setDefault',
          { id: id, app: this.appSelectKeys[0] },
          { dataType: 'form' }
        )
        .then((res) => {
          this.$loading(false)
          this.$message.success(res.msg)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    saveMenuSetting(values) {
      this.$loading(true)
      this.$api
        .PUT(
          '/menu/item/updateTemplateItems',
          { itemIds: values.toString(), templateId: this.templateId },
          { dataType: 'form' }
        )
        .then((res) => {
          this.$loading(false)
          this.$message.success(res.msg)
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    openSettingMenu(id) {
      this.templateId = id
      this.selectUrl = '/menu/item/selectTemplateItemIds?templateId=' + id
      this.$refs.menus.open()
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/menu/template/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.search(this.query)
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style scoped>
.server:deep(span.ant-tree-switcher) {
  width: 0px;
}
</style>
